<template>
  <div>
    <dog-pic   v-for="(item,index) in list" :key="index"
    :url="item.dogImgUrl"
    :name="item.dogName"
    :index="index"
    @prefer="prefer"
    />
    <ul>
      <li v-for="(i,ind) in preferList" :key="ind">{{i}}</li>
    </ul>
  </div>
</template>

<script>
import DogPic from './components/DogPic.vue'
export default {
  components:{
    DogPic
  },
  data(){
    return {
      list: [
        {
          dogImgUrl:"https://tse1-mm.cn.bing.net/th/id/OIP-C.NpW7f76yAjVeNJX0lPMAWwHaEo?pid=ImgDet&rs=1",
          dogName: "秋田犬",
        },
        {
          dogImgUrl:"https://img.chongshe.cn/276d5b8994210435.jpg",
          dogName: "萨摩耶",
        },
        {
          dogImgUrl:"https://tse4-mm.cn.bing.net/th/id/OIP-C.s9ZmRJfNVjPglJFoS0kxUwHaHa?pid=ImgDet&rs=1",
          dogName: "拉布拉多",
        },
        {
          dogImgUrl:"https://www.petking.cn/upload/dogimg/162529901.jpg",
          dogName: "阿拉斯加",
        },
      ],
      preferList:[]
    }
  },
  methods:{
    prefer(e){
      this.preferList.push(this.list[e].dogName)
    }
  }
}
</script>

<style>

</style>